<template>
<div class="FormButton">
    <Button @click.prevent="show" v-on="$listeners" :disabled="disabled" :size="size" :icon="icon"><span v-if="butText != ''">{{butText}}</span></Button>
    <Modal v-model="edit" title="编辑" v-bind="$attrs">
        <Form :model="formItem" ref="form">
            <Row :gutter="16">
                <Col v-for="(field, index) in formRender" :key="field.key" :span="field.col">
                <FormItem :prop="field.key" :rules="field.rules">
                    <template slot="label">
                        <Tooltip placement="top-start" transfer :offset="-15" v-if="field.tip">
                            <Icon type="md-alert" />
                            <div slot="content">
                                {{field.tip}}
                            </div>
                        </Tooltip>
                        {{field.title}}
                    </template>
                    <FieldRender :field="field" :fieldModel="formItem"></FieldRender>
                </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="text" @click.prevent="cancel">取消</Button>
            <Button type="primary" @click.prevent="save" :loading="loading">保存</Button>
        </div>
    </Modal>
</div>
</template>

<script>
import {
    initField,
    typeOf
} from '@/utils/tool.js'

export default {
    props: {
        formRender: Array,
        relationRef: {
            type: [Object, Function]
        },
        modalWidth: Number,
        data: Object,
        api: Function,
        disabled: Boolean,
        size: String,
        icon: {
            type: String,
            default: ""
        },
        text: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            formItem: {},
            edit: false,
            res: {},
            loading: false,
        }
    },
    computed: {
        comObj() {
            if (this.relationRef) {
                return this.relationRef
            } else if (this.$parent.$parent.$options._componentTag == "ModuleCard" && this.$parent.$parent.$slots.default && (this.$parent.$parent.$slots.default[0].componentOptions.tag == "Fields" || this.$parent.$parent.$slots.default[0].componentOptions.tag == "DataGrid")) {
                return this.$parent.$parent.$slots.default[0].componentInstance
            } else {
                return null
            }
        },
        formData() {
            if (this.data) {
                return this.data
            } else if (this.comObj && this.comObj.$options._componentTag == "Fields") {
                return this.comObj.formItem
            }else{
                return this.formItem
            }
        },
        butText() {
            if (this.icon == "" && this.text == "") {
                return "编辑"
            } else {
                return this.text
            }
        }
    },
    methods: {
        show() {
            this.edit = true
            this.formItem = Object.assign({}, this.formData)
            this.$emit("on-show", this.formItem)
        },
        async save() {
            this.loading = true

            let valid = await this.$refs.form.validate()
            if (valid) {
                this.$emit('on-before-load', this.formItem)
                let res = await this.api(this.formItem)
                if (res.isSucceed) {
                    if (this.comObj) this.comObj.loadData()

                    this.edit = false
                    this.$Message.success("保存成功");
                    let succRes = {
                        formData: this.formItem,
                        newData: res.newPrimaryKeys
                    }
                    this.$emit('on-success', succRes)
                    this.clear()
                } else {
                    this.$Message.error("保存失败" + res.message);
                }
            } else {
                this.$Message.error("验证失败");
            }

            this.loading = false
        },
        cancel() {
            this.edit = false
        },
        clear() {
            this.$refs.form.resetFields()
            this.formRender.map(fr => {
                initField(this.formItem, fr.models)
            })
        }
    },
    created() {
        this.formRender.map(fr => {
            initField(this.formItem, fr.models)
        })
    },
}
</script>

<style lang="less" scoped>
/deep/ .ivu-form-item-label {
    position: relative;
    z-index: 1;
}

.FormButton {
    display: inline-block;
}

/deep/ .ivu-modal-body {
    background-color: #f7f7f7;
}
</style>
